<template>
    <div class="flex-row flex-alignItem-center">
        <div class="flex-row flex-alignItem-center">
            <div class="webPlatform-logo">
                <img src="../../assets/icon/logo.png"  class="img-size-25"  alt="failLoad" >
            </div>
            <h1 class="webPlatform-title font-bolder m-lr-10 fontNoWrap">龙泉驿区人力资源大数据分析平台</h1>
        </div>	
        <div class="flex-row">
            <template v-for="item in list" >
                <div :key="item.text" class="districtInfoButton font-nowrap font-bold center content-border m-right-5">
                    <div class="districtInfoButtonContent center p-lr-10" :class="[item.checked?'button-select-bg':'button-bg']">{{item.text}}</div>
                </div>
            </template>            
        </div>	
        <div class="flex-row p-lr-5">
            <!-- 日历 -->
            <div class="calendar m-right-5">
                <el-date-picker
                    v-model="calendarValue"
                    size="mini"
                    popper-class="calendarSelect"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </div>
            <!-- 时间 -->
            <div class="calendar m-right-10 font-bold">
                <div class="time-YMD font-nowrap">{{nowTime.split(" ")[0]}}</div>
                <div class="time-detail">{{nowTime.split(" ")[1]}}</div>
            </div>
            <!-- 头像 -->
            <div @click="handleLogin()">
                <div v-if="isLogin" class="font-bold">
                    <img src="../../assets/icon/avatar.png" class="img-size-15" alt="">
                </div>
                <div v-else>未登录</div>
            </div>
        </div>	
    </div>
</template>

<script>
    import {loginApi} from '@/http/Api.js'
    import {handleSetStorage} from '@/http/auth.js'
    import getNowTime from '../../utils/getNowTime.js'
    export default {
        mounted(){
            // this.handleLogin()

            this.calendarValue = getNowTime().split(" ")[0].slice(0,7)

            let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
            this.timeFlag = setInterval(() => {
                _this.nowTime = getNowTime(); // 修改数据date
            }, 1000)
                
        },
        data(){
            return {
                list:[{text:"区域总览",checked:false},{text:"人口结构",checked:true},{text:"就业结构",checked:false},{text:"岗位结构",checked:false},{text:"技能人才",checked:false}],
                isLogin:this.$store.state.isLogin,
                // 日期
                calendarValue: "",
                // 时间
                timeFlag:null,
                nowTime:getNowTime(),
                
            }
        },
        methods:{
            handleLogin(){
                loginApi({
                    "loginName": "test",
                    "password": "123456"
                }).then(res=>{
                    console.log(res);
                    if(res.data.token){
                        handleSetStorage('token',res.data.token)
                    }
                }).catch(err=>console.log(err))    
            }
        },
        beforeDestroy(){
            if (this.timeFlag) {
                clearInterval(this.timeFlag); // 在Vue实例销毁前，清除我们的定时器
            }
        }
    }
</script>

<style lang="scss" scoped>
@import '../../assets/css/common.scss';
.webPlatform-title{   
    background-image: linear-gradient(to bottom, #ECF1FA, #4981CD);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    box-reflect: below 0 -webkit-linear-gradient(transparent, transparent 50%, rgba(255, 255, 255, .2));
	-webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent 50%, rgba(255, 255, 255, .2));
}
.districtInfoButton{
    cursor: pointer;
    width: 1rem;
    height: 0.4rem;
    @include fourSquareBorder(1px,15px);
}
.districtInfoButtonContent{
    width: calc(100% - 2px);
    height: calc(100% - 2px);
}

.calendar{
    
    :deep(.el-date-editor){
        width: 106px;
    }
    .time-YMD{
        margin-bottom: 0.05rem;
    }
    .time-detail{
        text-align: right;
    }
}

</style>